<template>
  <div class="home">
    <!-- 顶部导航栏 -->
    <!-- <van-sticky>
      <van-nav-bar title="家政服务员工版" />
    </van-sticky> -->
    <div class="header">家政服务员工版</div>
    <!-- 顶部轮播区域 -->
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in swiperData" :key="item.id">
          <img :src="item.url" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 菜单栏 -->
    <div class="menu">
      <van-grid direction="horizontal" :column-num="4">
        <van-grid-item to="/manager/order" icon="label" text="订单" />
        <van-grid-item to="/manager/profit" icon="gold-coin" text="收益" />
        <van-grid-item icon="question" text="帮助" />
        <van-grid-item to="/manager/mine" icon="manager" text="我的" />
      </van-grid>
    </div>
    <!-- 订单展示区域 -->
    <div class="order">
      <div class="text">我的订单</div>
      <van-search
        v-model="value"
        show-action
        placeholder="根据状态查询订单"
        @search="onSearch"
      >
        <template #action>
          <van-button plain type="info" size="small" @click="onSearch"
            >查询</van-button
          >
        </template>
      </van-search>
      <van-card
        v-for="order in OrderData"
        :key="order.id"
        :price="order.total"
        :desc="
          order.address.province + order.address.city + order.address.address
        "
        :title="order.address.username"
        :thumb="order.customer.userFace"
      >
        <template #tags>
          <van-tag plain type="success" v-if="order.status == '已完成'">{{
            order.status
          }}</van-tag>
          <van-tag plain type="warning" v-else-if="order.status == '待接单'">{{
            order.status
          }}</van-tag>
          <van-tag plain type="primary" v-else>{{ order.status }}</van-tag>
        </template>
        <template #footer>
          <span class="time">{{
            moment(order.orderTime).format("YYYY-MM-DD hh:mm:ss")
          }}</span>
        </template>
      </van-card>
      <div class="bottom"></div>
    </div>
  </div>
</template>

<script>
import { get } from "@/http/axios";
import { mapActions, mapState } from "vuex";
import moment from "moment";
export default {
  data() {
    return {
      swiperData: [],
      value: "",
      list: {
        page: 1,
        pageSize: 99,
      },
    };
  },
  computed: {
    // 引入栏目数据
    ...mapState("order", ["OrderData"]),
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    ...mapActions("user", ["getUserInfo"]),
    ...mapActions("order", ["getAllOrderData"]),
    moment,
    onSearch() {
      let data = {
        page: 1,
        pageSize: 99,
        status: this.value,
        employeeId: this.userInfo.id,
      };
      if (data.status == "") {
        delete data.status;
      }
      this.getAllOrderData(data);
    },
    //   获取所有轮播图的数据
    async getAllSwipeData() {
      let res = await get("/carousel/query", { status: "正常" });
      this.swiperData = res.data.data;
    },
  },
  created() {
    // 自动获取轮播图的数据
    this.getAllSwipeData();
    // 订单数据
    this.getUserInfo().then((r) => {
      this.list.employeeId = this.userInfo.id;
      this.getAllOrderData(this.list);
    });
  },
  mounted() {},
};
</script>
<style  scoped>
.bottom {
  height: 60px;
}
.home .swipe {
  width: 80%;
  height: 140px;
  position: absolute;
  background-color: #9002bf;
  top: 120px;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
}
.my-swipe,
.my-swipe img {
  width: 100%;
  height: 140px;
  margin: 0 auto;
  border-radius: 8px;
}
.menu {
  padding: 10px 15px;
  margin-top: 60px;
}

.product,
.text {
  margin-left: 25px;
  font-size: 16px;
}

.van-card__title {
  margin-top: 8px;
  font-size: 17px;
}
::v-deep .van-card__price {
  float: right;
}
.van-card__desc {
  margin-top: 10px;
}
.van-card {
  height: 130px;
  width: 95%;
  margin: 0 auto;
  margin-bottom: 20px;
  box-shadow: 1px 1px 1px 1px #888888;
  border: 1px solid rgb(253, 230, 230);
  border-radius: 10px;
}
::v-deep .van-card__thumb img {
  border-radius: 50px;
  margin-top: 10px;
}
.van-card__desc[data-v-6d720fe5] {
  font-size: 13px;
}
.cardbody {
  margin-top: 20px;
  margin-bottom: 60px;
}
.van-search__content {
  margin-top: 6px;
}

.header {
  height: 130px;
  background-image: linear-gradient(90deg, #7579ff, #bf73ff);
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  color: #fff;
  text-align: center;
  font-weight: bolder;
  font-size: 20px;
}
.time {
  float: left;
  margin-left: 100px;
  margin-top: -12px;
}
</style>